<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		 /* 字体：大小 颜色 加粗 斜体 样式
		       1.大小: font-size: px em rem  默认字体大小：16px
		          -px:像素 一旦设置之后，无法因为自适应页面的大小而改变
		          -em:相对于父元素的字体大小而设置
		          -rem:相对于根元素（<html>）
		       2.颜色:关键字 rgba 16进制
		       3.加粗:font-weight: bold bolder lighter 、100-900
		       4.倾斜:font-style: italic(倾斜) normal(正常)
		       5.样式:font-family
		  */
		 .box p{
		 	/*p的字体大小是2em em取决于父元素的字体大小 父元素的字体大小是20px 所以1em=20px 2em=40px*/
		 	font-size: 2em;
		 	color: pink;
		 	font-weight: bolder;
		 	/*倾斜*/
		 	font-style: italic;
		 	font-family: 微软雅黑;
		 }
		 .box{
		 	font-size: 20px;
		 }
		 /* 取决于html的字体大小，html是50px 1rem=50px */
		 p{
		 	font-size: 2rem;
		 }
		 html{
		 	font-size: 50px;
		 }
	</style>
</head>
<body>
    <div>普通字体</div>
    <div class="box">
    	<p>VIP字体</p>
    </div>
    <p>我是rem</p>
</body>
</html>